<template>
    <div class="maplegend" :class="isOpen?'is-opened':'is-closed'">
        <div class="maplegendIn">
            <div class="openIcon" :class="isOpen?'disappearOut':'appearOut'" @click="isOpen=!isOpen" v-show="!isOpen">
                <span>图层选择</span>
                <i :class="isOpen?'el-icon-d-arrow-right':'el-icon-d-arrow-left'"></i>
            </div>
            <transition name="move">
                <div v-show="isOpen">
                    <div class="openIcon" @click="isOpen=!isOpen">
                        <span>图层选择</span>
                        <i :class="isOpen?'el-icon-d-arrow-right':'el-icon-d-arrow-left'"></i>
                    </div>

                    <div class="box-card" :style="isIntegrated?'height:85px':'height:125px'">
                        <el-switch
                                v-model="modelSelectable"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-text="模型选择"
                                @change="changeStatus($event,1)">
                        </el-switch>
                        <el-switch
                                v-model="placeMarkSelectable"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-text="点位选择"
                                @change="changeStatus($event,2)">
                        </el-switch>
                        <el-switch v-show="!isIntegrated"
                                   v-model="regionSelectable"
                                   active-color="#13ce66"
                                   inactive-color="#ff4949"
                                   :active-text= "isDanger?'重大危险源':'区域选择'"
                                   @change="changeStatus($event,3)">
                        </el-switch>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    export default {
        name: "layerselect",
        data(){
            return{
                isOpen: false,
                modelSelectable: false,
                placeMarkSelectable: true,
                regionSelectable: false,
                isMounted:false
            }
        },
        props: {
            isIntegrated: {
                type: Boolean,
                default() {
                    return false;
                }
            },
            isDanger: {
                type: Boolean,
                default() {
                    return false;
                }
            }
        },
        // computed: {
        //     value:{
        //         get:function(){
        //             return this.isIntegrated
        //         },
        //         set:function(value){
        //             this.isIntegrated = value;
        //         }
        //     }
        // },
        watch :{

           //  isIntegrated:(newVal)=>{
           // if(newVal){
           //     this.$refs.boxcard.style.height = '85px';
           // }
           // else{
           //     this.$refs.boxcard.style.height = '125px';
           // }
           //  },
            modelSelectable(val){
                if(!window.modelUtils) return;
               if(val){
                   window.modelUtils.addHandler();
               }
               else{
                   window.modelUtils.removeHandler();
               }
            },
            placeMarkSelectable(val){
                if(!window.placeMarkutils) return;
                if(val){
                    window.placeMarkutils.addHandler();
                }
                else{
                    window.placeMarkutils.removeHandler();
                }
            },
            regionSelectable(val){
                if(!window.regionUtils) return;
                if(val){
                    window.regionUtils.addHandler();
                }
                else{
                    window.regionUtils.removeHandler();
                }
            }
        },
        beforeDestroy() {
            this.modelSelectable =  false;
            this.regionSelectable =  false;
            window.modelUtils.removeHandler();
            // window.placeMarkutils.removeHandler();
            window.regionUtils.removeHandler();
            //console.log('layerselect-destroy');
        },
        deactivated() {
            this.modelSelectable =  false;
            this.regionSelectable =  false;
            window.modelUtils.removeHandler();
            // if(!this.isMounted ){
            //     this.isMounted = false;
            //     window.placeMarkutils.removeHandler();
            // }

            window.regionUtils.removeHandler();
            //console.log('layerselect-deactivated')
        },
        activated() {
            this.modelSelectable =  false;
            this.placeMarkSelectable = true;
            this.regionSelectable =  false;
            window.placeMarkutils.addHandler();
        },
        mounted(){
            this.$bus.on('removeregionhandler',()=>{
                this.regionSelectable =  false;
            });
            this.$bus.on('removeplacemarkhandler',()=>{
                this.placeMarkSelectable = false;
            });
            this.$bus.on('removemodelhandler',()=>{
                this.modelSelectable =  false;
            });
            window.placeMarkutils.addHandler();
            this.isMounted = true;
        },
        methods:{
            changeStatus($event,index){
               if(index==1){
                  if($event){
                      this.placeMarkSelectable = false;
                      this.regionSelectable = false;
                  }

               }
               else if(index==2){
                   if($event){
                       this.modelSelectable = false;
                       this.regionSelectable = false;
                   }

               }
               else if(index==3){

                   if($event){
                       this.modelSelectable = false;
                       this.placeMarkSelectable = false;
                   }

               }
            }
        }

    }
</script>

<style lang="scss" scoped>

        .maplegend {
            position: absolute;
            right: 0;
            top: 200px;
            z-index: 400;

            .maplegendIn {
                position: relative;
            }

            .openIcon {
                font-size: 12px;
                display: inline-block;
                position: absolute;
                left: -45px;
                top: 20px;
                z-index: 400;
                width: 25px;
                text-align: center;
                padding: 10px;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
                cursor: pointer;
            }

            .box-card {
                /*position: absolute;*/
                /*top: 20px;*/
                /*right: 40px;*/
                /*width: 150px;*/
                /*height: 125px;*/
                /*z-index: 500;*/


                width: 150px;
                height: 125px;
                background-color: white;
                color: #9599a5;
                .el-switch {
                    margin: 10px 10px 10px 10px;
                }
            }
        }
        .maplegend.is-closed .openIcon {
            background-color: #fff;
        }
        .maplegend.is-opened .openIcon {
            background-color: rgb(84, 115, 232);
            color: #fff;
        }
        .move-enter-active,
        .move-leave-active {
            transition: all 0.5s linear;
            transform: translateX(0);
        }
        .move-enter,
        .move-leave {
            transform: translateX(100%);
        }
        .move-leave-to {
            transform: translateX(100%);
        }
        .disappearOut {
            opacity: 0;
        }
        @keyframes fade-in {
            0% {
                opacity: 0;
            }
            99% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @-webkit-keyframes fade-in {
            0% {
                opacity: 0;
            }
            99% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        .appearOut {
            animation: fade-in;
            animation-duration: 0.55s;
            -webkit-animation: fade-in 0.55s;
        }





</style>
